<template>
	<div class="box">
		<div class="header">
			<div style="flex:1;"><img src="../assets/img/logo@2x.png" alt="" style="width: 0.5rem;cursor: pointer;" @click="gobalck"></div>
			
			<label class="title" style="flex:1;text-align: center;">西宁市再生资源管理平台</label>
			<div class="right_title" style="flex:1;display: flex;justify-content: flex-end;">
				
				<span>{{timenow}}</span>
			</div>
		</div>

		<div class="select_box" id="select_box">
		</div>

		<div class="mid">
			<div class="left_mid">
				<div class="echart_box charts05">
					<div class="title" style="font-size: 0.26rem;color: #fff;font-weight: bold;text-align: center;">今日信息</div>
					<div style="display: flex;align-items: center;color: #fff;font-size: 0.26rem;width: 100%;justify-content: center;height: 80%;">
						<div style="font-size: 0.22rem; display: flex;flex-direction: column;justify-content: center; position: relative;height: 2.2rem;width: 2.2rem;">
							<div style="text-align: center;z-index: 2;">开机时间</div>
							<div style="text-align: center;z-index: 2;" :class="starttime=='未开机'?'weikaij':''">{{starttime}}</div>
							<img src="../assets/img/kanban/yuanquan.png" style="position: absolute;top: 0;left: 0;z-index: 1;height: 100%;width: 100%;" alt="">
						</div>
						<div style="font-size: 0.22rem; display: flex;flex-direction: column;justify-content: center; position: relative;height: 2.2rem;width: 2.2rem;">
							<div style="text-align: center;z-index: 2;">在线时长</div>
							<div style="text-align: center;z-index: 2;">{{onlietime}}</div>
							<img src="../assets/img/kanban/yuanquan.png" style="position: absolute;top: 0;left: 0;z-index: 1;height: 100%;width: 100%;" alt="">
						</div>
					</div>
					
				</div>


				<!--实时数据-->
				<div class="table">
					<label class="title">回收总量</label>
					<div class="title_menu">
						<div :class="tablemenuindex==index?'menu_active':''" v-for="(item,index) in tablemenu" :key="index" @click="gettabledata((index))">
							{{item}}
						</div>
					</div>
					<div class="header_table">
						<span style="width: 10%;"></span>
						<span style="width: 40%;">社区名称</span>
						<span style="width: 40%;">回收量</span>
					</div>
					<div class="list_scrool" v-loading="table.length==0" element-loading-background="rgb(24,26,33)">
						<ul class="ul-scoll">
							<li v-for="(item, index) in table" :class="activeid==item.id?'activeid':''" :key='index' style="cursor: pointer;" @click="getinfo(item.id)">
								<span style="width: 10%;"><span>{{index+1}}</span></span>
								<span style="width: 40%;">{{item.name}}</span>
								<span style="width: 40%;">{{item.number}}kg</span>
							</li>
						</ul>
					</div>
					
				
				</div>
			</div>
			
			<div class="mid_echart">
				<div class="base_info">
					<label class="title">基本信息</label>
					<div class="header_table">
						<span style="width: 25%;">社区名称</span>
						<span style="width: 25%;">负责人</span>
						<span style="width: 25%;">位置</span>
						<span style="width: 25%;">联系电话</span>
					</div>
					<div class="list_scrool" v-loading="table.length==0" element-loading-background="rgb(24,26,33)">
						<ul class="ul-scoll">
							<li>
								<span style="width: 25%;">{{table_son.name}}</span>
								<span style="width: 25%;">{{table_son.contact}}</span>
								<span style="width: 25%;">{{table_son.address}}</span>
								<span style="width: 25%;">{{table_son.telphone}}</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="box_echar first_box_echar">
					
					<div v-loading='loadingflag' id="charts01_1" class="charts01"></div>
					
					<div class="kanban" style="margin-top: 1vh;">
						<div v-for="(item,index) in imglist" :key='index' @mouseover='setindex(index)'>
							<img :src='index==left_index?item.img2:item.img1'>
							<label :class="index==left_index?'active':''">{{item.name}}</label>
							<label :class="index==left_index?'active':''">类别代码({{item.code}})</label>
						</div>
						
					</div>
				</div>
				
				<div class="box_echar" style="margin: 3vh 0;">
					<div v-loading='data_echarts02' id="charts02_2" class="charts01"></div>
					<div v-loading='loadingflag' id="charts01" class="charts01"></div>
				</div>
				
				<div class="box_echar fillbox">
					<div v-loading='data_echarts02' id="charts02" class="charts01"></div>
				</div>
				
					
			</div>
			
		</div>

		<!-- <div style="width:100vw;height:100vh;position: fixed !important;left: 0;top: 0;z-index: -11;">
			<div id="map" style="width: 100%;height: 100%;"></div>
		</div> -->
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	import echartsgl from 'echarts-gl' 
	import vueSeamlessScroll from 'vue-seamless-scroll/src'
	var cywc_zyq = require('./test.json')  //引入geojson文件
	export default {
		components: {
			vueSeamlessScroll
		},
		data() {
			return {
				timeer: '', //实时时间定时器
				timenow: '', //时间
				tablemenu:['累计','本月','本日'],
				tablemenuindex:0,
				activeid:'',//当前选中的id
				imglist:[
						{img1:require('../assets/img/kanban/1(2).png'),img2:require('../assets/img/kanban/2(2).png'),name:'废纸',code:'04'},
						{img1:require('../assets/img/kanban/1(8).png'),img2:require('../assets/img/kanban/2(8).png'),name:'废铁',code:'09'},
						{img1:require('../assets/img/kanban/1(4).png'),img2:require('../assets/img/kanban/2(4).png'),name:'家电',code:'14'},
						{img1:require('../assets/img/kanban/1(1).png'),img2:require('../assets/img/kanban/2(1).png'),name:'废玻璃',code:'08'},
						{img1:require('../assets/img/kanban/1(7).png'),img2:require('../assets/img/kanban/2(7).png'),name:'废塑料',code:'06'},
						{img1:require('../assets/img/kanban/1(10).png'),img2:require('../assets/img/kanban/2(10).png'),name:'废有色金属',code:'10'},
						{img1:require('../assets/img/kanban/1(3).png'),img2:require('../assets/img/kanban/2(3).png'),name:'牛羊杂骨',code:'32'},
						{img1:require('../assets/img/kanban/1(5).png'),img2:require('../assets/img/kanban/2(5).png'),name:'废橡胶',code:'05'},
						{img1:require('../assets/img/kanban/1(6).png'),img2:require('../assets/img/kanban/2(6).png'),name:'废泡沫',code:'06'},
						{img1:require('../assets/img/kanban/1(9).png'),img2:require('../assets/img/kanban/2(9).png'),name:'废棉纺',code:'01'},
						],
				table:[],//表格数据
				totaldata:'',//总计
				table_son:[],//社区分布
				myChart01:'',
				myChart02:'',
				myChart03:'',
				myChart04:"",
				myChart05:'',
				pieloading:true,
				left_index: 0,//悬浮图片变化
				midtimerr:'',//中间折线图定时器
				timer_tooltip:'',//循环hover定时器
				data_echarts02:[],//第二个折线图的数据
				timer_echart02:'',//第二个折线图定时器
				timer_echart01_1:'',//第二个折线图定时器
				timer_echart02_2:'',
				timer_lunbopl:'',
				alltimer:'',//总定时器
				alltimertable:'',
				xdatanumber:99,
				xdatanumber2:99,
				xdatanumber3:99,
				loadingflag:true,
				colorList:['#6bbefa','#7fec9d', '#fede8b', '#fda496', '#84e3dd','#6bbefa','#7fec9d'],
				starttime:'',
				onlietime:'',
				settimer_time:''
			}
		},
		mounted() {
			// this.create3D()
			
			
			// this.echart03()
			// this.echart04()
			// this.echart05()
			this.midtimer()

			// // GL版命名空间为BMapGL
			// // 按住鼠标右键，修改倾斜角和角度
			// var map = new BMapGL.Map("map"); // 创建Map实例
			// map.centerAndZoom(new BMapGL.Point(101.772498,36.656239), 15); // 初始化地图,设置中心点坐标和地图级别
			// let NavigationControl3D = new BMapGL.NavigationControl3D()
			// map.addControl(NavigationControl3D)
			// map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
			// map.setMapStyleV2({     
			//    styleId: '390a459f3b927d6b951ca146430b11ec' //官网地图api个性化获取
			// //   styleJson:[{}] //也可以json方式个性化
			// })

			// let newp = new BMapGL.Point(101.772498,36.656239)
			// addMarker(newp, '测试', '测试测试');

			// function addMarker(point, titlename, info) {
			// 	var myIcon = new BMapGL.Icon(require('../assets/u218.png'), new BMapGL.Size(64,64), {
			// 		//BMap.Size类表示以指定的宽度和高度创建一个矩形区域大小，有的时候图标太大，Size太小，可能不能显示图标或显示一部分图标
			// 		imageSize: new BMapGL.Size(64, 64), //设置显示图像的大小，因为256*256太大，所以可以设置它实际显示的长宽比例为25.6*25.6，相当于缩小十倍了
			// 		anchor: new BMapGL.Size(30, 30), //标注指向的地理位置距离图标左上角各偏移13和25.6像素(一般宽度是照片宽的一般，长度是照片的长，这样图标的
			// 		//   尖角就能刚好点在坐标点上，否则是图标的中心点在坐标点上)，本例中该位置即是图标中央下端的尖角位置
			// 	});
			// 	var marker = new BMapGL.Marker(point, {
			// 		icon: myIcon
			// 	});
			// 	console.log(marker)
			// 	map.addOverlay(marker);
			// 	var opts = {
			// 		width: 150, // 信息窗口宽度
			// 		height: 100, // 信息窗口高度
			// 		title: titlename, // 信息窗口标题
			// 		message: titlename
			// 	}
			// 	var infoWindow = new BMapGL.InfoWindow(info, opts); // 创建信息窗口对
			// 	marker.addEventListener("click", function() {
			// 		map.openInfoWindow(infoWindow, point); //开启信息窗口
			// 	});
			// }
			
		},
		unmounted(){
			clearInterval(this.timeer)
			clearInterval(this.alltimer)
			clearInterval(this.midtimerr)
			clearInterval(this.timer_echart02)
			clearInterval(this.alltimertable)
			clearInterval(this.timer_echart02_2)
			clearInterval(this.timer_lunbopl)
		},
		methods: {
			gobalck(){
				this.$router.back()
			},
			finishgun(){
				this.gettabledata()
			},
			setindex(index){//鼠标悬浮改变图片
				this.left_index = index
				this.changezxt(this.activeid)
			},
			
			//实时显示时间
			time() {
				var date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let hours = date.getHours();
				let minutes = date.getMinutes();
				let seconds = date.getSeconds();
				this.timenow = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t"

			},
			
			//3D地图charts
			create3D(){
				let this_ = this;
				  let myChart = echarts.init(document.getElementById('chart_example'));
				  // 注册地图名字(tongren)和数据(geoJson)
				  echarts.registerMap('xicheng',cywc_zyq,{});
						
						// 隐藏动画加载效果。
						myChart.hideLoading();			
						
						// 图表配置项		
						var option = {
							
								title : {							// 标题
									top : '5%',
									text : '青海省',
									subtext : '',
									x : 'center',
									textStyle : {
										color : '#ccc'
									}
								},
				
								tooltip : {							// 提示框
									trigger : 'item',
									formatter : function(params) {
										return params.name+'总计：'+params.value;
									}
								},
								
							    series: [{
							    	type: 'map3D',			  // 系列类型
							    	name: 'map3D',			  // 系列名称
						            map: 'xicheng',           // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。)
							      						        
							        label: {                // 标签的相关设置
							            show: false,                 // (地图上的城市名称)是否显示标签 [ default: false ]
							            // distance: 50,               // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
							            formatter:'{b}',               // 标签内容格式器
							            textStyle: {                // 标签的字体样式
							                color: '#000',                  // 地图初始化区域字体颜色
							                fontSize: 12,                    // 字体大小
							                opacity: 1,                     // 字体透明度
							                backgroundColor: 'rgba(0,23,11,0)'      // 字体背景色
							            },
							        },
							        
							        itemStyle: {            // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
							            color: 'rgba(4,173,161,0.5)',       // 地图板块的颜色
							            opacity: 1,                 // 图形的不透明度 [ default: 1 ]
							            borderWidth: 0.5,           // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
							            borderColor: '#000'         // 图形描边的颜色。[ default: #333 ]
							        },
							        
							        emphasis: {             // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式) 
							            label: {                // label高亮时的配置
							                show: true,
							                textStyle: {
							                    color: '#fff',      // 高亮时标签颜色变为 白色
							                    fontSize: 12,       // 高亮时标签字体 变大
							                }
							            },
							            itemStyle: {            // itemStyle高亮时的配置
							                areaColor: '#88f',   // 高亮时地图板块颜色改变
											color:'#0e81c1'
							            }
							        },
							        
							        groundPlane: {			// 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
							        	show: false,				// 是否显示地面。[ default: false ]
							        	color: '#aaa'			// 地面颜色。[ default: '#aaa' ]
							        },
							        
							        regions: [{				// 可对单个地图区域进行设置
							        	name: '西宁市',		// 所对应的地图区域的名称
							        	//regionHeight: '',			// 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
							        	itemStyle: {				// 单个区域的样式设置
								            color: '#00FF00',
								            opacity: 1,
								            borderWidth: 0.4,
								            borderColor: '#5F9EA0'
								        },
							        }, {
							        	name: '海东市',
							        	itemStyle: {
								            color: '#EEEE00',
								            opacity: 1,
								            borderWidth: 0.4,
								            borderColor: '#5F9EA0'
								        },
							        }],
							        
							        //shading: 'lambert',       // 三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式:
							                                        // 'color' 只显示颜色，不受光照等其它因素的影响。
							                                        // 'lambert' 通过经典的 lambert 着色表现光照带来的明暗。
							                                        // 'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR） 来表现真实感材质。
							        // realisticMaterial: {}    // 真实感材质相关的配置项，在 shading 为'realistic'时有效。
							        // lambertMaterial: {}      // lambert 材质相关的配置项，在 shading 为'lambert'时有效。
							        // colorMaterial: {}        // color 材质相关的配置项，在 shading 为'color'时有效。
							        
							        light: {                    // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
							            main: {                     // 场景主光源的设置，在 globe 组件中就是太阳光。
							                color: '#fff',              //主光源的颜色。[ default: #fff ] 
							                intensity: 1.2,             //主光源的强度。[ default: 1 ]
							                shadow: false,              //主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
							                //shadowQuality: 'high',      // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
							                alpha: 55,                  // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
							                beta: 10                    // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
							            },
							            ambient: {                  // 全局的环境光设置。
							                color: '#fff',              // 环境光的颜色。[ default: #fff ]
							                intensity: 0.5              // 环境光的强度。[ default: 0.2 ]
							            }
							        },
							        
							        viewControl: {			// 用于鼠标的旋转，缩放等视角控制。
							        	projection: 'perspective',		// 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
							        	autoRotate: false,				// 是否开启视角绕物体的自动旋转查看。[ default: false ] 
							        	autoRotateDirection: 'cw',		// 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
							        	autoRotateSpeed: 10,			// 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
							        	autoRotateAfterStill: 3,		// 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
							        	damping: 0,						// 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
							        	rotateSensitivity: 1,			// 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
							        	zoomSensitivity: 1,				// 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
							        	panSensitivity: 1,				// 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
							        	panMouseButton: 'left',			// 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
							        	rotateMouseButton: 'left',		// 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
							        	
							        	distance: 120,					// [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
							        	minDistance: 40,				// [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
							        	maxDistance: 400,				// [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
							        	
							        	alpha: 40, 						// 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
							        	beta: 15,						// 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
							        	minAlpha: -360,					// 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
							        	maxAlpha: 360,					// 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
							        	minBeta: -360,					// 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
							        	maxBeta: 360,					// 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
							        	
							        	center: [0,0,0],				// 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
							        	
							        	animation: true,				// 是否开启动画。[ default: true ]
							        	animationDurationUpdate: 1000,	// 过渡动画的时长。[ default: 1000 ]
							        	animationEasingUpdate: 'cubicInOut'		// 过渡动画的缓动效果。[ default: cubicInOut ]
							        },
							        
									data: [ 				// 可对单个地图区域进行设置
										{name: '西宁市',   	// 所对应的地图区域的名称
										 value: 17000,
										 regionHeight: '20',	// 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
										 itemStyle: {			// 单个区域的样式设置
								            color: '#0e81c1',
								            opacity: 1,
								            borderWidth: 0.4,
								            borderColor: '#5F9EA0'
										 },
										}
									]
						        }]
						};
						
						// 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。
						myChart.setOption(option);
				
				//   myChart.setOption(option);
				  // myChart.on('click', function (param) {
				  //       console.info('点击' + JSON.stringify(param.data) ) // 柱状图上的数值并不会弹出
				  //       // this.openMessage() // 这个方法也没执行
				  //       //可根据 param.data.name 进行判断 跳转 第七区
				  // })
				 
				  //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
				  window.addEventListener('resize',function() {myChart.resize()});
			},
		
		
		
			
			charts01_1(id){
				var that = this
				const test  = { chart: null }
				test.chart = echarts.init(document.getElementById('charts01_1'));
				var id_name=''
				var dataarr = []
				this.$post({url:'/api/DataScreen/day_trend',params:{hut_id:id}}).then( res => {
					this.loadingflag = false
					let data1=[]
					let data2=[]
					let xdatalist=[]
					let xdata=[]
					res.forEach((item,index)=>{
						data1.push(item.hour_dl)
						data2.push(item.hour_zl)
						xdata.push(item.time)
					})
					//第一个折线图变化
					var option = {
					     	title: {
					     		text:'日运营走势',
					     		top: '2%',
					     		left: 'center',
					     		textStyle: {
					     			color: '#FFFFFF'
					     		}
					     	},
					     	tooltip: {
					     		trigger: 'axis'
					     	},
					     	grid: {
					     		top: '18%',
					     		left: '3%',
					     		right: '3%',
					     		bottom: '12%',
					     		containLabel: true
					     	},
					     	legend: {
								show:false,
					     		left: 'center',
					     		bottom: '2%',
					     		textStyle: {
					     			color: '#FFFFFF'
					     		},
					     		data: ['单品回收量走势(kg)']
					     	},
					     	xAxis: {
					     		type: 'category',
					     		axisLabel: {
					     			show: true,
					     			interval: 0
					     		},
								splitLine: {     //网格线
								    show: false
								},
					     		data: xdata
					     	},
							yAxis: [
							    {
							      type: 'value',
							      scale: true,
							      name: '小时单量',
								  min: 0, // 指定最小值
								  max: 1000, // 指定最大值
							      axisLabel: {
							      	formatter: function(val) {
							      		return val;
							      	}
							      },
								  splitLine: {     //网格线
								    lineStyle:{
								            color:['#ffffff3D'],
								            width:1,
											type:'solid'
								        }
								  },
								  
							    },
							    {
							      type: 'value',
							      name: '小时重量',
								  min: 0,
								  max: 100,
								  splitLine: {     //网格线
								    lineStyle:{
								            color:['#ffffff3D'],
								            width:1,
								  			type:'solid'
								        }
								  },
							    }
							],
					     	// color:['#818181','#00baff'],
					     	series: [{
					     		name: '小时单量',
					     		data: data1,
					     		type: 'line',	
								yAxisIndex: 0,
								color:'#836F31'
					     	},
							{
								name: '小时重量(kg)',
								data: data2,
								type: 'bar',	
								yAxisIndex: 1,
								itemStyle: {
								    normal: {
								　　　　　　　//这里是重点
								        color: function(params) {
								        	//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
								            return that.colorList[params.dataIndex]
								        }
								    }
								}
							}]
					 
					 };
					 // 使用刚指定的配置项和数据显示图表。
					test.chart.setOption(option);
					
					//数据轮播
					// this.timer_echart01_1 = setInterval(()=>{
					// 	data1.shift();
					// 	data1.push(data1[1]*1.2);
					// 	data2.shift();
					// 	data2.push(data1[1]*1.2);
					// 	if(this.xdatanumber==99){
					// 		this.xdatanumber = xdata.length-1
					// 	}else{
					// 		this.xdatanumber++
					// 	}
					// 	xdata.push(xdatalist[this.xdatanumber]);
					// 	xdata.shift();
						
						
					// 	test.chart.setOption({
					// 	    xAxis: [
					// 	      {
					// 	        data: xdata
					// 	      }
					// 	    ],
					// 	    series: [
					// 	      {
					// 	        data: data1
					// 	      },
					// 	      {
					// 	        data: data2
					// 	      }
					// 	    ]
					// 	  });
						  
					// 	  if(this.xdatanumber==xdatalist.length-1){
					// 	  	this.xdatanumber = 0
					// 	  }
					// },2000)
				})
							
				
			},
			charts02_2(id){
				var that = this
				const test  = { chart: null }
				test.chart = echarts.init(document.getElementById('charts02_2'));
				var id_name=''
				var dataarr = []
				this.$post({url:'/api/DataScreen/month_trend',params:{hut_id:id}}).then( res => {
					this.loadingflag = false
					let data1=[]
					let data2=[]
					let data11=[]
					let data22=[]
					let xdaylist=[]
					let xday=[]
					res.forEach((item,index)=>{
						data1.push(item.month_dl)
						data2.push(item.month_zl)
						xdaylist.push(item.time)
						if(index<6){
							xday.push(item.time)
							data11.push(item.month_dl)
							data22.push(item.month_zl)
						}
					})
					
					//第一个折线图变化
					var option = {
					     	title: {
					     		text:'月运营走势',
					     		top: '2%',
					     		left: 'center',
					     		textStyle: {
					     			color: '#FFFFFF'
					     		}
					     	},
					     	tooltip: {
					     		trigger: 'axis'
					     	},
					     	grid: {
					     		top: '18%',
					     		left: '3%',
					     		right: '3%',
					     		bottom: '12%',
					     		containLabel: true
					     	},
					     	legend: {
								show:false,
					     		left: 'center',
					     		bottom: '2%',
					     		textStyle: {
					     			color: '#FFFFFF'
					     		},
					     		data: ['单品回收量走势(kg)']
					     	},
					     	xAxis: {
					     		type: 'category',
					     		axisLabel: {
					     			show: true,
					     			interval: 0
					     		},
								splitLine: {     //网格线
								    show: false
								},
					     		data: xday
					     	},
							yAxis: [
							    {
							      type: 'value',
							      scale: true,
							      name: '每日单量',
								  min: 0, // 指定最小值
								  max: 1000, // 指定最大值
							      axisLabel: {
							      	formatter: function(val) {
							      		return val;
							      	}
							      },
								  splitLine: {     //网格线
								    lineStyle:{
								            color:['#ffffff3D'],
								            width:1,
											type:'solid'
								        }
								  },
								  
							    },
							    {
							      type: 'value',
							      name: '每日重量',
								  min: 0,
								  max: 100,
								  splitLine: {     //网格线
								    lineStyle:{
								            color:['#ffffff3D'],
								            width:1,
								  			type:'solid'
								        }
								  },
							    }
							],
					     	// color:['#818181','#00baff'],
					     	series: [{
					     		name: '日单量',
					     		data: data11,
					     		type: 'line',	
								yAxisIndex: 0,
								color:'#836F31'
					     	},
							{
								name: '日重量(kg)',
								data: data22,
								type: 'bar',
								yAxisIndex: 1,
								itemStyle: {
								    normal: {
								　　　　　　　//这里是重点
								        color: function(params) {
								        	//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
								            return that.colorList[params.dataIndex]
								        }
								    }
								}
							}]
					 
					 };
					 // 使用刚指定的配置项和数据显示图表。
					test.chart.setOption(option);
					clearInterval(this.timer_echart02_2)
					this.timer_echart02_2 = setInterval(()=>{
						if(this.xdatanumber2==99){
							this.xdatanumber2 = xday.length
						}else{
							this.xdatanumber2++
						}
						xday.push(xdaylist[this.xdatanumber2]);
						xday.shift();
						data11.push(data1[this.xdatanumber2]);
						data11.shift();
						data22.push(data2[this.xdatanumber2]);
						data22.shift();
						if(this.xdatanumber2==xdaylist.length-1){
							this.xdatanumber2 = -1
							
						}
						
						test.chart.setOption({
						    xAxis: [
						      {
						        data: xday
						      }
						    ],
						    series: [
						      {
						        data: data1
						      },
						      {
						        data: data2
						      }
						    ]
						  });
						  
						  
					},2000)
				})
			},
			//各类回收统计
			echart02(id){
				var that = this
				this.data_echarts02=[]
				this.$post({url:'/api/DataScreen/mouth_trend',params:{hut_id:id}}).then((res)=>{
					let data1=[]
					let data2=[]
					let data11=[]
					let data22=[]
					let xdaylist=[]
					let xday=[]
					res.forEach((item,index)=>{
						data1.push(item.month_dl)
						data2.push(item.month_zl)
						xdaylist.push(item.time)
						if(index<6){
							xday.push(item.time)
							data11.push(item.month_dl)
							data22.push(item.month_zl)
						}
					})
					const test  = { chart: null }
					test.chart = echarts.init(document.getElementById('charts02'));
					        var option2 = {
					             	title: {
					             		text:'年运营走势',
					             		top: '2%',
					             		left: 'center',
					             		textStyle: {
					             			color: '#FFFFFF'
					             		}
					             	},
					             	tooltip: {
					             		trigger: 'axis'
					             	},
					             	grid: {
					             		top: '18%',
					             		left: '3%',
					             		right: '3%',
					             		bottom: '12%',
					             		containLabel: true
					             	},
					             	legend: {
					        			show:false,
					             		left: 'center',
					             		bottom: '2%',
					             		textStyle: {
					             			color: '#FFFFFF'
					             		},
					             		data: ['单品回收量走势(kg)']
					             	},
					             	xAxis: {
					             		type: 'category',
					             		axisLabel: {
					             			show: true,
					             			interval: 0
					             		},
					        			splitLine: {     //网格线
					        			    show: false
					        			},
					             		data: xdaylist
					             	},
					        		yAxis: [
					        		    {
					        		      type: 'value',
					        		      scale: true,
					        		      name: '月单量',
					        			  min: 0, // 指定最小值
					        			  max: 1000, // 指定最大值
					        		      axisLabel: {
					        		      	formatter: function(val) {
					        		      		return val;
					        		      	}
					        		      },
					        			  splitLine: {     //网格线
					        			    lineStyle:{
					        			            color:['#ffffff3D'],
					        			            width:1,
					        						type:'solid'
					        			        }
					        			  },
					        			  
					        		    },
					        		    {
					        		      type: 'value',
					        		      name: '月重量',
					        			  min: 0,
					        			  max: 10000,
					        			  splitLine: {     //网格线
					        			    lineStyle:{
					        			            color:['#ffffff3D'],
					        			            width:1,
					        			  			type:'solid'
					        			        }
					        			  },
					        		    }
					        		],
					             	// color:['#818181','#00baff'],
					             	series: [{
					             		name: '月单量',
					             		data: data1,
										yAxisIndex: 0,
					             		type: 'line',	
					        			color:'#836F31'
					             	},
					        		{
					        			name: '月重量',
					        			data: data2,
					        			type: 'bar',	
										yAxisIndex: 1,
					        			itemStyle: {
					        			    normal: {
					        			        color: function(params) {
					        			        	if (params.dataIndex >= that.colorList.length) {													
					        			        		   let indexclor = params.dataIndex - that.colorList.length;
														   return that.colorList[indexclor]
					        			        	}
					        			            return that.colorList[params.dataIndex]
					        			        }
					        			    }
					        			}
					        		}]
					         
					         };
					        // // 使用刚指定的配置项和数据显示图表。
							
					        test.chart.setOption(option2,true);
							// clearInterval(this.timer_echart02)
							// var echar02_i =0
							// this.timer_echart02 = setInterval(()=>{
							// 	if(echar02_i!=0){
							// 		test.chart.dispatchAction({ type: 'downplay', dataIndex:echar02_i-1 });
							// 	}
							// 	test.chart.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: echar02_i })
							// 	echar02_i++
							// 	if(data1.length==echar02_i){
							// 		test.chart.dispatchAction({ type: 'downplay', dataIndex: echar02_i-1 });
							// 		echar02_i = 0
							// 	}
							// },2000)
							
				})
				
			},
			
			
			//各品类占比
			echart03(){
				this.myChart03 = echarts.init(document.getElementById('charts03'));
				        
			},
			
			//获取开机时间
			getstarttime(id){
				clearInterval(this.settimer_time)
				this.$post({url:'/api/DataScreen/day_msg',params:{hut_id:id}}).then( res => {
						this.starttime = res.kj_time
						this.onlietime = res.zx_duration
						this.settimer_time = setInterval(()=>{
							this.getstarttime(this.activeid)
						},60000)
					})
			},
			
			//每月占比
			echart04(){
				this.myChart04 = echarts.init(document.getElementById('charts04'));
			},
			
			
			//各品回收点占比
			echart05(){
				this.myChart05 = echarts.init(document.getElementById('charts05'));
				       
			},
			
			//中间折线图设置定时器变化
			midtimer(){
				this.midtimerr = setInterval(()=>{
					this.left_index++
					if(this.left_index==this.imglist.length){
						this.left_index=0
					}
					this.changezxt(this.activeid)
					
				},16000)
			},
			changezxt(hut_id){//第一个折线图变化
				const test  = { chart: null }
				test.chart = echarts.init(document.getElementById('charts01'));
				var id = -1
				var id_name=''
				var dataarr1 = []
				var dataarr2 = []
				var dataarr11 = []
				var dataarr22 = []
				var dataX = []
				var ddataX = []
				switch(this.left_index){
					case 0:
						id=2
						id_name='废纸'
						break;
					case 1:
						id=4
						id_name='废铁'
						break;
					case 2:
						id=5
						id_name='家电'
						break;
					case 3:
						id=10
						id_name='废玻璃'
						break;
					case 4:
						id=3
						id_name='废塑料'
						break;
					case 5:
						id=6
						id_name='废有色金属'
						break;
					case 6:
						id=9
						id_name='牛羊杂骨'
						break;
					case 7:
						id=11
						id_name='废橡胶'
						break;
					case 8:
						id=8
						id_name='废泡沫'
						break;
					case 9:
						id=12
						id_name='废棉纺'
						break;
				}
				this.$post({url:'/api/DataScreen/hs_trend',params:{id:id,hut_id:hut_id}}).then( res => {
					this.loadingflag = false
					res.forEach((item,index)=>{
						dataarr1.push(item.month_dl)
						dataarr2.push(item.month_zl)
						dataX.push(item.time)
						if(index<6){
							ddataX.push(item.time)
							dataarr11.push(item.month_dl)
							dataarr22.push(item.month_zl)
						}
					})
					//第一个折线图变化
					var option = {
					     	title: {
					     		text: id_name+'回收走势',
					     		top: '2%',
					     		left: 'center',
					     		textStyle: {
					     			color: '#FFFFFF'
					     		}
					     	},
					     	tooltip: {
					     		trigger: 'axis'
					     	},
					     	grid: {
					     		top: '18%',
					     		left: '3%',
					     		right: '3%',
					     		bottom: '12%',
					     		containLabel: true
					     	},
					     	legend: {
								show:false,
					     		left: 'center',
					     		bottom: '2%',
					     		textStyle: {
					     			color: '#FFFFFF'
					     		},
					     		data: ['单品回收量走势(kg)']
					     	},
					     	xAxis: {
					     		type: 'category',
					     		axisLabel: {
					     			show: true,
					     			interval: 0
					     		},
					     		data: ddataX
					     	},
							yAxis: [
							    {
							      type: 'value',
							      scale: true,
							      name: '每月回收单量',
							      axisLabel: {
							      	formatter: function(val) {
							      		return val;
							      	}
							      },
								  min: 0,
								  max: 300,
								  splitLine: {     //网格线
								    lineStyle:{
								            color:['#ffffff3D'],
								            width:1,
								  			type:'solid'
								        }
								  },
								  
							    },
							    {
							      type: 'value',
							      scale: true,
							      name: '每月回收重量',
							      axisLabel: {
							      	formatter: function(val) {
							      		return val;
									}
							      	},
								  min: 0,
								  max: 300,
								  splitLine: {     //网格线
								    lineStyle:{
								            color:['#ffffff3D'],
								            width:1,
								  			type:'solid'
								        }
								  },
							    }
							],
					     	// color:['#818181','#00baff'],
					     	series: [{
					     		name: '月单量',
					     		data: dataarr11,
					     		type: 'line',	
								color:'#836F31'
					     	},
							{
								name: '月重量(kg)',
								data: dataarr22,
								type: 'bar',	
								
							}]
					 
					 };
					 // 使用刚指定的配置项和数据显示图表。
					test.chart.setOption(option);
					
					clearInterval(this.timer_lunbopl)
					this.timer_lunbopl = setInterval(()=>{
						if(this.xdatanumber3==99){
							this.xdatanumber3 = ddataX.length
						}else{
							this.xdatanumber3++
						}
						ddataX.push(dataX[this.xdatanumber3]);
						ddataX.shift();
						dataarr11.push(dataarr1[this.xdatanumber3]);
						dataarr11.shift();
						dataarr22.push(dataarr2[this.xdatanumber3]);
						dataarr22.shift();
						if(this.xdatanumber3==dataX.length-1){
							this.xdatanumber3 = -1
							
						}
						
						test.chart.setOption({
						    xAxis: [
						      {
						        data: ddataX
						      }
						    ],
						    series: [
						      {
						        data: dataarr11
						      },
						      {
						        data: dataarr22
						      }
						    ]
						  });
						  
						  
					},2000)
				})
			
				
			},
		
			
			//获取表格数据
			gettabledata(index){
				if(index||index==0){
					this.tablemenuindex = index
				}
				this.$post({url:'/api/DataScreen/RecycleCont',params:{type:this.tablemenuindex+1}}).then( res => {
					this.table=[]
					res.forEach((item2,index2)=>{
						let obj ={
							id:item2.hut_id,
							name:item2.name,
							number:item2.number
						}
						this.table.push(obj)
					})
					if(this.$route.query.id){
						this.activeid = this.$route.query.id
						this.getinfo(this.activeid)
					}else{
						this.activeid = res[0].hut_id
						this.getinfo(res[0].hut_id)
					}
				
				})
			},
			getinfo(id){
				this.activeid = id
				this.charts01_1(this.activeid)
				this.changezxt(this.activeid)
				this.charts02_2(this.activeid)
				this.echart02(this.activeid)
				this.getstarttime(this.activeid)
				this.getbtdata(this.activeid)
				this.$post({url:'/api/DataScreen/wd_msg',params:{hut_id:id}}).then( res => {
					this.table_son={}
					
					this.table_son ={
						address:res.address,
						name:res.name,
						contact:res.contact,
						telphone:res.telphone
					}
				})
			},
			//获取社区分布数据
			// getwddata(){
			// 	this.$post({url:'/api/DataScreen/SpotData'}).then( res => {
			// 		this.table_son=[]
			// 		res.HutData.forEach((item,index)=>{
			// 			let obj={
			// 				city: item.name,
			// 				contact: item.contact,
			// 				telphone: item.telphone,
			// 				state:item.state,
			// 				month_done: item.total,
			// 			}
			// 			this.table_son.push(obj)
			// 		})
					
			// 	})
			// },
			//饼图数据
			getbtdata(id){
				this.$post({url:'/api/DataScreen/pl_zb',params:{hut_id:id}}).then( res => {
					this.pieloading = false
					//每月占比
					let datalist=[]
					res.forEach((item,index)=>{
						let obj={
							value:item.number,
							name:item.name
						}
						datalist.push(obj)
					})
					// 指定图表的配置项和数据
					var option4 = {
					    	title: {
					    		text: '品类总量占比',
					    		subtext: '',
					    		left: 'center',
					    		textStyle: {
					    			color: '#FFFFFF'
					    		}
					    	},
					    	legend: {
								show:false,
					    		orient: 'vertical',
					    		top: '5%',
					    		left: '5%',
					    		textStyle: {
					    			color: "rgb(129,129,129)"
					    		}
					    	},
					    	tooltip: {
					    		trigger: 'item',
					    		formatter: "{b} :{d}%"
					    	},
					    	
					    	series: [{
					    		name: '',
					    		type: 'pie',
					    		radius: ['40%', '70%'],
					    		avoidLabelOverlap: false,
								label: {
									show: true,
									formatter: '{b} :{d}%',
									fontSize: 12,
									color: '#818181'
								},
								labelLine: {
									show: true
								},
					    		emphasis: {
					    			label: {
					    				show: true,
					    				fontSize: '20',
					    				fontWeight: 'bold'
					    			}
					    		},
					    		data: datalist
					    	}]
					};
					// 使用刚指定的配置项和数据显示图表。
					this.myChart04.setOption(option4);
					
				})
				this.$post({url:'/api/DataScreen/month_zb',params:{hut_id:id}}).then( res => {
					//各品类占比
					let datalist2=[]
					res.forEach((item,index)=>{
						let obj={
							value:item.number,
							name:item.name
						}
						datalist2.push(obj)
					})
					// 指定图表的配置项和数据
					var option3 = {
					    	title: {
					    		text: '本月品类占比',
					    		subtext: '',
					    		left: 'center',
					    		textStyle: {
					    			color: '#FFFFFF'
					    		}
					    	},
					    	tooltip: {
					    		trigger: 'item',
					    		formatter: "{b} : {c} ({d}%)"
					    	},
					    	toolbox:{
								show:false
							},
					    	series: [{
					    		name: '',
					    		type: 'pie',
					    		radius: ['40%', '70%'],
					    		data: datalist2,
					    		itemStyle: {
					    			emphasis: {
					    				shadowBlur: 10,
					    				shadowOffsetX: 0,
					    				shadowColor: 'rgba(0, 0, 0, 0.5)'
					    			},
					    			normal: {
					    				label: {
					    					show: true,
					    					formatter: '{b} :{d}%',
					    					fontSize: 12,
					    					color: '#818181'
					    				},
					    				labelLine: {
					    					show: true
					    				}
					    			}
					    		},
					    	}]
					
					};
					// 使用刚指定的配置项和数据显示图表。
					this.myChart03.setOption(option3);
					
				})
				// this.settimer(datalist.length,datalist3.length,datalist2.length)
			},
			
			
			settimer(length1,length2,length3){
				var i=0,i2=0,i3=0
				this.myChart04.on("mouseover",(params)=>{
					for(let i1=0;i1<=length1;i1++){
						this.myChart04.dispatchAction({ type: 'downplay', dataIndex:i1 });
					}
					this.myChart04.dispatchAction({ type: 'highlight', dataIndex: params.dataIndex }); // dataIndex属性伟data传入的索引值
					this.myChart04.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: params.dataIndex })
				})
				this.timer_tooltip = setInterval(()=>{
					for(let i1=0;i1<=length1;i1++){
						this.myChart04.dispatchAction({ type: 'downplay', dataIndex:i1 });
					}
					
					this.myChart04.dispatchAction({ type: 'highlight', dataIndex: i }); // dataIndex属性伟data传入的索引值
				    this.myChart04.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: i })
					i++
					if(i==length1){
						this.myChart04.dispatchAction({ type: 'downplay', dataIndex: i-1 });
						i=0
					}
					
					
					
					
					// for(let echarti2=0;echarti2<length2;echarti2++){
					// 	this.myChart05.dispatchAction({ type: 'downplay', dataIndex: echarti2 });
					// }
					// this.myChart05.dispatchAction({ type: 'highlight', dataIndex: i2 }); // dataIndex属性伟data传入的索引值
					// this.myChart05.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: i2 })
					// i2++
					// if(i2==length1){
					// 	i2=0
					// }
					
					
					for(let echarti3=0;echarti3<length3;echarti3++){
						this.myChart03.dispatchAction({ type: 'downplay', dataIndex: echarti3 });
					}
					this.myChart03.dispatchAction({ type: 'highlight', dataIndex: i3 }); // dataIndex属性伟data传入的索引值
					this.myChart03.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: i3 })
					i3++
					if(i3==length3){
						i3=0
					}
				},2000)
			},
			//饼图数据 用于定时器
			getbtdata222(){
				this.$post({url:'/api/DataScreen/PieChartData'}).then( res => {
					this.pieloading = false
					//每月占比
					let datalist=[]
					res.monthRatio.forEach((item,index)=>{
						let obj={
							value:item.month_total,
							name:item.materialName
						}
						datalist.push(obj)
					})
					// 指定图表的配置项和数据
					var option4 = {
					    	title: {
					    		text: '每月占比',
					    		subtext: '',
					    		left: 'center',
					    		textStyle: {
					    			color: '#FFFFFF'
					    		}
					    	},
					    	legend: {
								show:false,
					    		orient: 'vertical',
					    		top: '5%',
					    		left: '5%',
					    		textStyle: {
					    			color: "rgb(129,129,129)"
					    		}
					    	},
					    	tooltip: {
					    		trigger: 'item',
					    		formatter: "{b} :{d}%"
					    	},
					    	
					    	series: [{
					    		name: '',
					    		type: 'pie',
					    		radius: ['40%', '70%'],
					    		avoidLabelOverlap: false,
					    		label: {
					    			show: false,
					    			position: 'center',
					    			formatter: function(e){
					    			　　　　        var newStr=" ";
					    							var newStr2=" ";
					    					　　　　　　　　　newStr=e.name+'\n'; 
					    							  newStr2+=newStr+e.percent+"%";//添加百分号处理
					    						　　　 return newStr2;
					    				　　},
					    			fontSize: 10,
					    			color: '#818181'
					    		},
					    		emphasis: {
					    			label: {
					    				show: true,
					    				fontSize: '20',
					    				fontWeight: 'bold'
					    			}
					    		},
					    		labelLine: {
					    			show: false
					    		},
					    		data: datalist
					    	}]
					};
					// 使用刚指定的配置项和数据显示图表。
					this.myChart04.setOption(option4);
					
				
				
					//各品类占比
					let datalist2=[]
					res.typeRatio.forEach((item,index)=>{
						let obj={
							value:item.total,
							name:item.materialName
						}
						datalist2.push(obj)
					})
					// 指定图表的配置项和数据
					var option3 = {
					    	title: {
					    		text: '各品类占比',
					    		subtext: '',
					    		left: 'center',
					    		textStyle: {
					    			color: '#FFFFFF'
					    		}
					    	},
					    	tooltip: {
					    		trigger: 'item',
					    		formatter: "{b} : {c} ({d}%)"
					    	},
					    	toolbox:{
								show:false
							},
					    	series: [{
					    		name: '',
					    		type: 'pie',
					    		radius: '50%',
					    		data: datalist2,
					    		itemStyle: {
					    			emphasis: {
					    				shadowBlur: 10,
					    				shadowOffsetX: 0,
					    				shadowColor: 'rgba(0, 0, 0, 0.5)'
					    			},
					    			normal: {
					    				label: {
					    					show: true,
					    					formatter: '{b} :{d}%',
					    					fontSize: 12,
					    					color: '#818181'
					    				},
					    				labelLine: {
					    					show: true
					    				}
					    			}
					    		},
					    	}]
					
					};
					// 使用刚指定的配置项和数据显示图表。
					this.myChart03.setOption(option3);
					
					
					
					
					//各回收站占比
					let datalist3=[]
					res.spotRatio.forEach((item,index)=>{
						let obj={
							value:item.total,
							name:item.name
						}
						datalist3.push(obj)
					})
					// 指定图表的配置项和数据
					var option5 = {
					    	title: {
					    		text: '各回收点占比',
					    		subtext: '',
					    		left: 'center',
					    		textStyle: {
					    			color: '#FFFFFF'
					    		}
					    	},
					    	color: ['#5C7BD9',
					    		'#73C0DE',
					    		'#E1DC60'
					    	],
							tooltip: {
								trigger: 'item',
								formatter: "{b} : {c} ({d}%)"
							},
							toolbox:{
								show:false
							},
					    	legend: {
								show:false,
					    		orient: 'vertical',
					    		top: '5%',
					    		left: '5%',
					    		textStyle: {
					    			color: "rgb(129,129,129)"
					    		},
					    		
					    	},
					    	series: [{
					    		name: '需求类型占比',
					    		type: 'pie',
					    		center: ['50%', '55%'],
					    		radius: '80%',
					    		label: {
					    			normal: {
					    				show: false,
					    			},
					    		},
					    		labelLine: {
					    			show: false,
					    			length: 0,
					    			length2: 0,
					    		},
					    		label: {
					    			normal: {
					    				show: true,
					    				position: 'inside',
					    				formatter: '{d}%',
					    				fontSize: 14,
					    				color: '#FFFFFF',
					    				rich: {
					    					value: {
					    						fontSize: 20,
					    						color: '#ffffff',
					    					},
					    				},
					    			}
					    		},
					    		data: datalist3,
					    	}],
					
					};
					// 使用刚指定的配置项和数据显示图表。
					this.myChart05.setOption(option5);
					
				})
			},	
					
		},
		watch: {},
		created() {
			this.gettabledata()
			// this.getwddata()
			// this.getbtdata()
			this.timeer = setInterval(() => {
				this.time()
			}, 1000);
			this.alltimer=setInterval(()=>{
				// this.getbtdata222()
				// this.echart02()
			},60000)
			// this.alltimertable=setInterval(()=>{
			// 	this.getwddata()
			// },30000)
		},
		computed: {
			defaultOption() {
				return {
					step: 0.2, // 数值越大速度滚动越快
					limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
					hoverStop: true, // 是否开启鼠标悬停stop
					direction: 1, // 0向下 1向上 2向左 3向右
					openWatch: true, // 开启数据实时监控刷新dom
					singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
					singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
					waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
				}
			}
		},
}
</script>

<style scoped lang="less">
	@import url('./dandata.less');
</style>
